<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观看直播</title>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.min.css" rel="stylesheet"/>
    <!--播放器脚本文件-->
    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.8.0/tcplayer.v4.8.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="left">
        <!--       容器 -->
        <div class="video">
            <video id="player-container-id" preload="auto" playsinline webkit-playsinline></video>
            <canvas ref="canvas"></canvas>
        </div>
        <!--    聊天盒子-->
        <div class="send">
            <!--        发送框-->
            <input type="text" v-model="message" value="" maxlength="20" placeholder="发弹幕">

            <button @click="sendMessage">发送消息</button>
            <!-- <button>发送</button> -->
            <input type="color" class="color" value="#FF0000">
        </div>
    </div>

    <!--        聊天内容区-->
    <div id="scrolldIV">
        <p v-for="msg in messageList">{{msg}}</p>
    </div>

</div>
<script>
    const input = document.querySelector("input");
    const btn = document.querySelector("button");
    const color = document.querySelector(".color");
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    var nowColor = color.value;
    var time = 3;
    var texts = [];
    canvas.width = 800;
    canvas.height = 300;

    color.addEventListener('change',()=>{
        nowColor = color.value;
    })
    btn.addEventListener('click',()=>{
        let nowTxt = input.value;
        if(nowTxt!=''){
            input.value = '';
            texts.push({
                txt:nowTxt,
                x:canvas.width,
                y:Math.random()*(canvas.height-16)+16,
                color:nowColor
            })
            console.log(texts)
        }
    })
    input.addEventListener('keydown',e=>{
        if(e.keyCode==13){
            btn.click();
        }
    })
    function update(){
        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(let i=0;i<texts.length;i++){
            texts[i].x -= 1;
            if(texts[i].x<140) texts.splice(i,1);
        }

        texts.forEach(item=>{
            ctx.font = "16px Arial";
            ctx.fillStyle = item.color;
            ctx.fillText(item.txt,item.x,item.y);
        })
        window.requestAnimationFrame(update);
    }
    update();

    new Vue({
        el:'.container',
        data:{
            url:'webrtc://team2.wyrgzc.love/shanpay/admin',//直播间拉流地址
            message:'',//发送的消息
            websocket:null,
            messageList:[],//聊天内容
            canvasObj: null
        },
        methods:{

            //发送消息
            sendMessage(){
                // console.log("单击事件触发")
                this.websocket.send(this.message);
                // //发送消息后清空
                // this.message='';
                let nowTxt = this.message;
                console.log(nowTxt)
                if(nowTxt!=''){
                    this.message = '';
                    /*texts.push({
                        txt: nowTxt,
                        x: canvas.width,
                        y: Math.random()*(canvas.height-16)+16,
                        color: nowColor
                    })*/
                    this.updateBarrage()
                }
            },
            updateBarrage() {
                this.canvasObj.clearRect(0,0,canvas.width,canvas.height);
                for(let i=0;i<texts.length;i++){
                    texts[i].x -= 1;
                    if(texts[i].x<140) texts.splice(i,1);
                }

                texts.forEach(item=>{
                    this.canvasObj.font = "16px Arial";
                    this.canvasObj.fillStyle = item.color;
                    this.canvasObj.fillText(item.txt,item.x,item.y);
                })
                window.requestAnimationFrame(this.updateBarrage);
            }

        },
        mounted(){
            // 初始化canvas
            this.canvasObj = this.$refs['canvas'].getContext('2d')

            var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
            player.src(this.url); // url 播放地址

            //随机用户名    正常开发中应该是登录的用户名字 后期再改
            var name="user"+Math.floor(Math.random()*10000);
            //建立后端的常链接
            //内网穿透
            this.websocket = new WebSocket("ws://icxads.natappfree.cc/chatroom/"+name);
            //很重要
            var that=this
            //发送的消息放到聊天集合
            this.websocket.onmessage = function (res) {
                var message=res.data
                that.messageList.push(message)

                let nowTxt = message;
                if(nowTxt!=''){
                    texts.push({
                        txt: nowTxt,
                        x: canvas.width,
                        y: Math.random()*(canvas.height-16)+16,
                        color: nowColor
                    })
                }

                var div = document.getElementById('scrolldIV');
                div.scrollTop = div.scrollHeight;
            }
        }

    })
</script>
</body>
</html>
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    /*box*/
    .container{
        margin: auto;
        display: flex;
        justify-content: center;
        position: relative;
        width: 1000px;
        height: 380px;
    }
    /*左边视频播放*/
    .container .left .video #player-container-id{
        width: 800px;
        height: 550px;
        /*object-fit: cover;*/
        border: 2px outset rgb(211, 211, 211);
    }
    .container .left .video canvas{
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        fillRect(0,0,150,75)
    }
    .container .left .send{
        width: 500px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .send input:first-child{
        height: 100%;
        width: 400px;
        outline:none;
        padding-left: 1em;
        border-radius: 5px 0 0 5px;
        border: 1px solid rgb(155, 155, 155);
    }
    .send>button{
        height: 100%;
        width: 60px;
        border-radius: 0 5px 5px 0;
        border: none;
        cursor: pointer;
        background-color: rgb(22, 162, 255);
        color: #fff;
        letter-spacing: 3px;
        box-shadow: 1px 1px 1px rgb(75, 75, 75), inset 1px 1px 1px  white;
    }
    .send>button:active{
        box-shadow:inset 1px 1px 1px rgb(75, 75, 75),
        1px 1px 1px  white;
    }
    /**
    *颜色板
    */
    .send .color{
        /*position: absolute;*/
        bottom: 1px;
        /*right: 65px;*/
        width: 20px;
        height: 20px;
    }


    /*聊天区*/
    .container #scrolldIV{
        overflow: auto;
        width: 410px;
        height: 550px;
        background-color: #096;
    }

</style>
